<template>
    <span
      :class="[
        'inline-flex items-center px-2 py-1 rounded text-xs font-medium',
        sizeClass,
        typeClass
      ]"
    >
      <slot />
    </span>
  </template>
  
  <script setup lang="ts">
  interface Props {
    type?: 'default' | 'primary' | 'success' | 'warning' | 'danger'
    size?: 'sm' | 'md'
  }
  
  const props = withDefaults(defineProps<Props>(), {
    type: 'default',
    size: 'md',
  })
  
  const typeClasses = {
    default: 'bg-gray-100 text-gray-700',
    primary: 'bg-primary-100 text-primary-700',
    success: 'bg-green-100 text-green-700',
    warning: 'bg-orange-100 text-orange-700',
    danger: 'bg-red-100 text-red-700',
  }
  
  const sizeClasses = {
    sm: 'text-xs',
    md: 'text-sm',
  }
  
  const typeClass = computed(() => typeClasses[props.type])
  const sizeClass = computed(() => sizeClasses[props.size])
  </script>